<template>
	<view class="page-container">
		<scroll-view class="main-sroll-view" scroll-y @scroll="onContainerScroll">
			<view class="main-sroll-header">
				<view class="status-bar" :style="{ height: navHeight + 'px', 'padding-top': statusBarHeight + 'px', }">
					<!-- 右侧按钮 -->
					<view class="nav-right-icons">
						<image src="/static/shara_icon.png" class="nav-icon" @click="onShare" />
						<image src="/static/settings_icon.png" class="nav-icon" @click="onSettings" />
					</view>
				</view>
				<view class="user-info-card">
					<view class="user-info-main">
						<view style="display: flex; align-items: center">
							<image class="user-avatar" :src="getAvatarUrl(userInfo.user_head)" @click.stop="goUserInfo" />
							<view class="user-info-text">
								<view class="user-nickname-row" @click.stop="goUserInfo">
									<text class="user-nickname">{{ userInfo.nickname }}</text>
								</view>
								<view class="user-uid-row">
									<text class="user-uid">邀请码: {{ userInfo.invite_code }}</text>
									<image class="copy-icon" src="/static/copy_icon1.png" @click="copyUid" />
								</view>
							</view>
						</view>
						<!-- 右箭头 -->
						<!-- <view class="user-info-right">
							<view class="info-vip">
								<view style="display: flex;justify-content: center; align-items: center;">
									<view class="vip-name">{{ vipStatusText }}</view>
									<button class="vip-open-btn" @click="onEdit">
										<image class="vip-icon" src="/static/vip_icon.png" />
										<text class="vip-btn-text">去开通</text>
										<span class="vip-glare"></span>
									</button>
								</view>
								<view class="vip-time">{{ vipEndTimeText }}</view>
							</view>
						</view> -->
					</view>
				</view>
			</view>
			<!-- VIP开通卡片 -->
			<!-- <view class="vip-card">
				<view class="vip-card-content">
					<view class="vip-card-left">
						<view class="vip-title">开通VIP一限时月卡优惠</view>
						<view class="vip-subtitle">全角色解锁｜全功能通用｜无限聊天</view>
					</view>
					<view class="vip-card-right">
						<button class="vip-open-button" @click="onOpenVip">立即开通</button>
					</view>
				</view>
			</view> -->
			<view class="main-sroll-content">
				<view class="ai-section">
					<view class="ai-tabs" v-if="!isTabFixed">
						<view class="ai-tabs-scroll">
							<view v-for="(tab, idx) in aiTabs" :key="tab" :class="['ai-tab', aiTabIndex === idx ? 'active' : '']"
								@click="onTabClick(idx)">
								{{ tab }}
							</view>
						</view>
					</view>

					<swiper class="tab-content-swiper" :current="aiTabIndex" @change="onSwiperChange"
						:style="{ height: swiperHeight + 'px' }">
						<!-- 智能体 -->
						<swiper-item>
							<scroll-view scroll-y class="swiper-scroll-view">
								<view class="ai-card-list">
									<view class="ai-card personality-card" @click="goPersonalized">
										<image class="personality-bg" src="/static/personality_bg.png" mode="aspectFill" />
										<view class="personality-content">
											<view class="personality-title">
												<text class="personality-title-text">创建智能体</text>
												<image class="right-arrow" src="/static/right_arrow.png" />
											</view>
											<view class="personality-desc">个性定制</view>
										</view>
									</view>

									<!-- 个人智能体子标签 -->
									<view class="ai-sub-tabs">
										<view class="ai-sub-tab" :class="{ active: aiSubTabIndex === 0 }" @click="onSubTabClick(0)">
											我的助理
										</view>
									</view>
									<!-- 我的助理 -->
									<view class="ai-bot-list"
										v-if="aiSubTabIndex === 0 && !personalAILoading && personalAIList.length > 0">
										<view class="ai-bot-card" v-for="(item, index) in personalAIList" :key="index"
											@click="onPersonalAIClick(item)">
											<view class="bot-img-container">
												<view class="bot-img"
													:style="{ backgroundImage: `url(${item.image || '/static/default_avatar.png'})` }"
													:class="{ 'loaded': item.imageLoaded }">
												</view>
												<!-- 隐藏的image标签用于监听加载事件 -->
												<image class="hidden-image" :src="item.image || '/static/default_avatar.png'"
													@load="onBotImageLoad(index)" @error="onBotImageError(index)">
												</image>
												<!-- 加载动画 -->
												<view class="bot-img-loading" v-if="!item.imageLoaded">
													<view class="loading-spinner"></view>
												</view>
												<!-- 骨架屏占位符 -->
												<view class="bot-img-skeleton" v-if="!item.imageLoaded">
													<view class="skeleton-shimmer"></view>
												</view>
											</view>
											<view class="bot-info">
												<view class="bot-title-row">
													<text class="bot-title">{{ item.title || '智能体名称' }}</text>
												</view>
												<text class="bot-desc">{{ item.description || '智能体简介智能体简介...' }}</text>
											</view>
										</view>
									</view>

									<!-- 加载状态 -->
									<view class="loading-more" v-if="aiSubTabIndex === 0 && personalAILoading">
										<!-- <c-lottie src="/static/loading.json" :autoPlay="true" :loop="true" width="100%"
											height="207rpx" /> -->
									</view>

									<!-- 智能体无数据状态 -->
									<view class="empty-message"
										v-if="aiSubTabIndex === 0 && !personalAILoading && personalAIList.length === 0">
										<image class="empty-img" src="/static/empty_state.png" />
										<text class="empty-text">暂无个人智能体</text>
									</view>
								</view>
							</scroll-view>
						</swiper-item>

						<!-- 最近 -->
						<swiper-item>
							<scroll-view scroll-y class="swiper-scroll-view">
								<view class="message-list">
									<view class="message-item" v-for="(item, index) in messageList" :key="item.id + '-' + index"
										@click="onMessageClick(item)">
										<view class="message-avatar-wrapper">
											<view class="message-avatar"
												:style="{ backgroundImage: `url(${getAvatarUrl(item.headimgurl) || '/static/default_avatar.png'})` }"
												:class="{ 'loaded': item.avatarLoaded }">
											</view>
											<!-- 隐藏的image标签用于监听加载事件 -->
											<image class="hidden-avatar-image"
												:src="getAvatarUrl(item.headimgurl) || '/static/default_avatar.png'"
												@load="onMessageAvatarLoad(index)" @error="onMessageAvatarError(index)">
											</image>
											<!-- 加载动画 -->
											<view class="avatar-loading" v-if="!item.avatarLoaded">
												<view class="avatar-loading-spinner"></view>
											</view>
											<!-- 骨架屏占位符 -->
											<view class="avatar-skeleton" v-if="!item.avatarLoaded">
												<view class="avatar-skeleton-shimmer"></view>
											</view>
										</view>
										<view class="message-content">
											<view class="message-title-row">
												<text class="message-title">{{ item.company_name }}</text>
												<text class="message-date">{{ item.create_time }}</text>
											</view>
											<text class="message-desc">{{ item.prologue }}</text>
											<view class="message-copy">
												<image class="copy-icon" src="/static/copy-icon.png" @click.stop="copyText(item)" />
												<image class="down-icon" src="/static/down-icon.png" @click.stop="downLoad(item)" />
											</view>
										</view>
									</view>
									<view class="loading-more" v-if="messageLoading">
										<!-- <c-lottie src="/static/loading.json" :autoPlay="true" :loop="true" width="100%"
											height="207rpx" /> -->
									</view>
									<!-- 最近无数据状态 -->
									<view class="empty-message" v-if="!messageLoading && messageList.length === 0">
										<image class="empty-img" src="/static/empty_state.png" />
										<text class="empty-text">暂无消息</text>
									</view>
								</view>
							</scroll-view>
						</swiper-item>

						<!-- 下载会议 -->
						<swiper-item>
							<scroll-view scroll-y class="swiper-scroll-view">
								<view class="message-list">
									<view class="message-item" v-for="(item, index) in meetingList" :key="item.id + '-' + index"
										@click="onMeetingClick(item)">
										<view class="message-avatar-wrapper">
											<view class="message-avatar"
												:style="{ backgroundImage: `url(${getAvatarUrl(item.bot_data && item.bot_data.headimgurl) || '/static/default_avatar.png'})` }"
												:class="{ 'loaded': item.avatarLoaded }">
											</view>
											<!-- 隐藏的image标签用于监听加载事件 -->
											<image class="hidden-avatar-image"
												:src="getAvatarUrl(item.bot_data && item.bot_data.headimgurl) || '/static/default_avatar.png'"
												@load="onMeetingAvatarLoad(index)" @error="onMeetingAvatarError(index)">
											</image>
											<!-- 加载动画 -->
											<view class="avatar-loading" v-if="!item.avatarLoaded">
												<view class="avatar-loading-spinner"></view>
											</view>
											<!-- 骨架屏占位符 -->
											<view class="avatar-skeleton" v-if="!item.avatarLoaded">
												<view class="avatar-skeleton-shimmer"></view>
											</view>
										</view>
										<view class="message-content">
											<view class="message-title-row">
												<text class="message-title">{{ (item.bot_data && item.bot_data.title) || '会议记录' }}</text>
												<text class="message-date">{{ item.create_time }}</text>
											</view>
											<text class="message-desc">个人会议记录</text>
											<!-- <text class="message-desc">{{ (item.bot_data && item.bot_data.prologue) || '会议总结' }}</text> -->
											<view class="message-copy">
												<image class="copy-icon" src="/static/copy-icon.png"
													@click.stop="downLoadMeetingSummary(item)" />
												<image class="down-icon" src="/static/down-icon.png" @click.stop="downLoadMeeting(item)" />
											</view>
										</view>
									</view>
									<view class="loading-more" v-if="meetingLoading">
										<!-- <c-lottie src="/static/loading.json" :autoPlay="true" :loop="true" width="100%"
											height="207rpx" /> -->
									</view>
									<!-- 下载会议无数据状态 -->
									<view class="empty-message" v-if="!meetingLoading && meetingList.length === 0">
										<image class="empty-img" src="/static/empty_state.png" />
										<text class="empty-text">暂无会议记录</text>
									</view>
								</view>
							</scroll-view>
						</swiper-item>

						<!-- 使用指南 -->
						<swiper-item>
							<scroll-view scroll-y class="swiper-scroll-view">
								<view class="user-guide">
									<image src="/static/user-guide.png" class="user-guide-img" mode="widthFix"></image>
								</view>
							</scroll-view>
						</swiper-item>

					</swiper>
				</view>
			</view>
		</scroll-view>

		<view v-show="showSharePoster" class="share-poster-mask" @touchmove.stop.prevent>
			<view class="share-poster-dialog">
				<view class="share-poster-img-box">
					<image src="/static/shara720.png" class="share-poster-img" mode="widthFix" />
					<!-- 新增：邀请码浮层，绝对定位在图片上 -->
					<view class="poster-invite-code">
						<text class="invite-label">邀请码：</text>
						<text class="invite-code">{{ userInfo.invite_code || '无' }}</text>
					</view>
				</view>
				<!-- 下面是按钮区，不变 -->
				<view class="share-poster-btns">
					<button class="share-cancel-btn" @click="showSharePoster = false">
						取消分享
					</button>
					<button class="share-confirm-btn" @click="onSharePoster">
						分享海报
					</button>
				</view>
			</view>
		</view>

		<app-update ref="app_update" :tabbar="false" @closeSearchModel="closeSearchModel"></app-update>

		<canvas canvas-id="posterCanvas" id="posterCanvas"
			style="width: 600px; height: 1067px; position: absolute; left: -9999px; top: -9999px;"></canvas>
	</view>
</template>

<script>
import WaterfallFlow from "@/components/waterfall-flow/waterfall-flow.vue"
// import cLottie from "@/uni_modules/c-lottie/components/c-lottie/c-lottie.vue"
import dayjs from 'dayjs'
import appUpdate from "@/components/yzhua006-update/app-update.vue"

export default {
	components: {
		WaterfallFlow,
		appUpdate
		// cLottie,
	},
	data() {
		return {
			// 添加新的数据属性
			TabCur: 0,
			scrollLeft: 0,
			current: 0,
			showtabbar: true,
			list: [{
				name: "我的",
			},
			{
				name: "收藏",
			},
			{
				name: "私密",
			},

			],
			itemList: [],
			page: 1,
			pageSize: 10,
			loading: false,
			finished: false,
			messageLoading: false,
			navHeight: "", //整体顶部导航栏的高度
			statusBarHeight: "", //状态栏高度
			hideUserInfo: false, // 是否隐藏用户信息
			lastY: 0, // 上一次触摸的Y坐标
			startY: 0, // 起始 Y 坐标
			current: 0,
			userInfo: (() => {
				const userInfo = uni.getStorageSync("userInfo") || {};
				return userInfo.data ? userInfo.data : userInfo;
			})(),
			// aiTabs: ["智能体", "最近", "消息", "收藏"],
			aiTabs: ["智能体", "最近", "会议", "使用指南"],

			aiTabIndex: 0,
			aiSubTabIndex: 0,
			navAvatarOpacity: 0, // 顶部头像昵称透明度
			messageList: [], // 动态消息列表
			rawMessageList: [], // 保留原始数据用于跳转
			favoriteList: [], // 收藏列表，动态获取
			showSharePoster: false, // 是否显示分享海报
			scrollTop: 0,
			lastScrollTop: 0,
			isTabFixed: false,
			tabOffsetTop: 0,
			// 其他数据保持不变
			scrollTimer: null,
			isRendering: false, // 添加一个标志位，防止重复渲染
			headerTransform: 0,
			contentTransform: 0,
			// 现有数据保持不变
			contentHeight: 0, // 添加内容高度变量
			windowHeight: 0, // 添加窗口高度变量
			headerHeight: 0, // 添加头部高度变量
			tabbarHeight: 94, // tabbar 高度，与 app-tabbar 组件保持一致
			swiperHeight: 700,
			messageLoaded: false, // 添加一个标志位，防止重复渲染
			meetingList: [], // 会议记录列表
			meetingLoading: false, // 会议记录加载状态
			meetingLoaded: false, // 会议记录是否已加载
			personalAIList: [], // 个人智能体列表，从API获取
			personalAILoading: false, // 个人智能体列表加载状态
		}
	},
	created() {
		let userInfo = uni.getStorageSync('userInfo');
		//获取手机系统的信息（主要是获取状态栏和胶囊的高度）
		let {
			statusBarHeight,
			system
		} = uni.getSystemInfoSync()
		this.statusBarHeight = statusBarHeight
		this.navHeight = statusBarHeight + (system.indexOf("iOS") > -1 ? 44 : 48)
		// 获取系统信息
		const sysInfo = uni.getSystemInfoSync()
		this.windowHeight = sysInfo.windowHeight
		this.statusBarHeight = sysInfo.statusBarHeight
		this.navHeight =
			this.statusBarHeight + (sysInfo.system.indexOf("iOS") > -1 ? 44 : 48)
	},
	mounted() {
		// 获取 tabs 的初始位置
		this.$nextTick(() => {
			const query = uni.createSelectorQuery().in(this)
			// 获取 ai-tabs 位置
			query
				.select(".ai-tabs")
				.boundingClientRect((data) => {
					if (data) {
						this.tabOffsetTop = data.top - data.height
					}
				})
				.exec()
			
			// 获取头部高度和VIP卡片高度
			let headerHeight = 0;
			let vipCardHeight = 0;
			
			query.select(".main-sroll-header")
				.boundingClientRect((data) => {
					if (data) {
						headerHeight = data.height;
						this.headerHeight = headerHeight;
					}
				})
				.exec()
			
			query.select(".vip-card")
				.boundingClientRect((data) => {
					if (data) {
						vipCardHeight = data.height;
					}
				})
				.exec()
			
			// 延迟计算，确保所有节点都获取到了
			setTimeout(() => {
				// 计算内容区域高度 = 窗口高度 - 头部高度 - VIP卡片高度 - tabbar高度 - 安全区域底部高度
				const safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets ?
					uni.getSystemInfoSync().safeAreaInsets.bottom :
					0
				this.contentHeight =
					this.windowHeight -
					(headerHeight || this.headerHeight) -
					vipCardHeight -
					this.tabbarHeight -
					safeAreaBottom

				// 计算swiper高度
				this.swiperHeight = this.contentHeight
			}, 100)
		})
		uni.$on('refreshMineUserInfo', this.refreshUserInfo);

		// 监听头像更新事件
		uni.$on('updateUserAvatar', this.updateUserAvatar);

		// 监听用户信息更新事件
		uni.$on('updateUserInfo', this.updateUserInfo);

		this.$refs.app_update.update() //调用子组件 检查更新

		// 初始化加载个人智能体数据
		this.loadPersonalAIList();
	},
	beforeDestroy() {
		uni.$off('refreshMineUserInfo', this.refreshUserInfo);
		// 移除头像更新事件监听
		uni.$off('updateUserAvatar', this.updateUserAvatar);
		// 移除用户信息更新事件监听
		uni.$off('updateUserInfo', this.updateUserInfo);
	},
	onLoad() {
		let userInfo = uni.getStorageSync('userInfo');
		const userid = userInfo?.data?.userid || userInfo?.userid || '';
		if (!userid) {
			uni.navigateTo({
				url: '/minePages/login'
			});
		}
	},
	onShow() {
		const userInfo = uni.getStorageSync("userInfo") || {};
		this.userInfo = userInfo.data ? userInfo.data : userInfo;
		this.$forceUpdate && this.$forceUpdate();

		// 如果当前在智能体标签页且个人智能体子标签激活，刷新数据
		if (this.aiTabIndex === 0 && this.aiSubTabIndex === 0) {
			this.loadPersonalAIList();
		}
	},


	// 添加页面滚动监听
	onPageScroll(e) {
		// 调用现有的滚动处理方法
		this.onContainerScroll(e)
	},

	methods: {
		resetWaterfallFlow() {
			this.page = 1
			this.finished = false
			this.itemList = []
			this.loadData()
		},
		onTabClick(idx) {
			this.aiTabIndex = idx;
			uni.pageScrollTo({
				scrollTop: 0
			});
			if (idx === 0) {
				// 智能体标签页，加载个人智能体数据
				this.loadPersonalAIList();
			}
			if (idx === 1 && !this.messageLoaded) {
				this.messageLoading = true;
				this.getRecentList();
				this.messageLoaded = true;
				setTimeout(() => {
					this.messageLoading = false;
				}, 1000);
			}
			if (idx === 2 && !this.meetingLoaded) {
				this.meetingLoading = true;
				this.getMeetingList();
				this.meetingLoaded = true;
				setTimeout(() => {
					this.meetingLoading = false;
				}, 1000);
			}
			// if ([1, 3].includes(idx)) {
			//   this.resetWaterfallFlow()
			// } else if (idx === 2) {
			//   this.messageLoading = true
			//   setTimeout(() => {
			//     this.messageLoading = false
			//   }, 1000)
			// }
		},
		// 添加swiper切换事件处理
		onSwiperChange(e) {
			this.aiTabIndex = e.detail.current;
			if (this.aiTabIndex === 0) {
				// 智能体标签页，加载个人智能体数据
				this.loadPersonalAIList();
			}
			if (this.aiTabIndex === 1 && !this.messageLoaded) {
				this.messageLoading = true;
				this.getRecentList();
				this.messageLoaded = true;
				setTimeout(() => {
					this.messageLoading = false;
				}, 1000);
			}
			if (this.aiTabIndex === 2 && !this.meetingLoaded) {
				this.meetingLoading = true;
				this.getMeetingList();
				this.meetingLoaded = true;
				setTimeout(() => {
					this.meetingLoading = false;
				}, 1000);
			}
			// 根据当前标签页重新加载数据
			if ([1, 3].includes(this.aiTabIndex)) {
				this.resetWaterfallFlow()
			} else if (this.aiTabIndex === 2) {
				this.messageLoading = true
				setTimeout(() => {
					this.messageLoading = false
				}, 1000)
			}
		},
		// 加载数据
		loadData() {
			this.loading = true
			// 模拟API请求
			setTimeout(() => {
				const newItems = Array.from({
					length: 10,
				},
					(_, i) => ({
						id: this.itemList.length + i + 1,
						title: "智能体名称",
						description: "智能体简介智能体简介...",
						image: "https://picsum.photos/300/400?random=" +
							(this.itemList.length + i + 1),
						loading: true,
					})
				)

				this.itemList = [...this.itemList, ...newItems]
				this.loading = false

				// 模拟数据加载完成
				if (this.page >= 3) {
					this.finished = true
				}

				this.page++
			}, 1000)
		},

		// 加载更多
		loadMore() {
			if (!this.loading && !this.finished) {
				this.loadData()
			}
		},

		// 图片加载完成
		imageLoaded(id) {
			const index = this.itemList.findIndex((item) => item.id === id)
			if (index !== -1) {
				this.$set(this.itemList[index], "loading", false)
			}
		},

		// 图片加载失败
		imageError(id) {
			const index = this.itemList.findIndex((item) => item.id === id)
			if (index !== -1) {
				this.$set(this.itemList[index], "loading", false)
				// this.$set(this.itemList[index], "image", "/static/images/error.png")
			}
		},

		goPersonalized() {
			uni.navigateTo({
				url: "/minePages/personalized",
			})
		},
		onShare() {
			this.showSharePoster = true;
		},
		onSettings() {
			// 跳转到设置页
			uni.navigateTo({
				url: "/minePages/set",
			})
		},
		copyUid() {
			uni.setClipboardData({
				data: String(this.userInfo.invite_code),
				success: () => {
					uni.showToast({
						title: "UID已复制",
						icon: "none",
					})
				},
			})
		},
		goUserInfo() {
			uni.navigateTo({
				url: "/minePages/userinfo",
			})
		},
		onOpenVip() {
			uni.navigateTo({
				url: "/minePages/rechargeCenter",
			})
		},
		onContainerScroll(e) {
			let scrollTop = e.detail.scrollTop || e.scrollTop
			// 计算视觉差效果
			if (scrollTop < 200) {
				// 计算导航栏透明度
				let fadeStart = 0,
					fadeEnd = 80 // 渐变区间
				let opacity = 0
				if (scrollTop > fadeStart) {
					opacity = Math.min(1, (scrollTop - fadeStart) / (fadeEnd - fadeStart))
				}
				this.navAvatarOpacity = opacity
				// 限制最大变换值，防止底部出现过多空白
				const maxHeaderTransform = this.headerHeight * 0.5
				this.headerTransform = Math.min(scrollTop * 0.3, maxHeaderTransform)

				// content 移动速度较快，但也要限制最大值
				this.contentTransform = Math.min(scrollTop * 1.1, this.headerHeight)
			}

			// 判断是否需要吸顶
			this.isTabFixed = scrollTop > this.tabOffsetTop - this.navHeight
		},
		onMessageClick(item) {
			const appSecret = item.app_secret;
			let userInfo = uni.getStorageSync('userInfo');
			const userid = userInfo?.data?.userid || userInfo?.userid || '';
			uni.navigateTo({
				url: `/activityPages/reserve?appSecret=${encodeURIComponent(appSecret)}&userid=${encodeURIComponent(userid)}`
			});
		},
		// 消息列表
		getRecentList() {
			if (!this.userInfo || !this.userInfo.userid) return;
			let userInfo = uni.getStorageSync('userInfo');
			const userid = userInfo?.data?.userid || userInfo?.userid || '';
			let formData = {
				userid: userid,
			};
			this.$Request.postApi("/bot/api/agentcgetmymsg", formData).then((res) => {
				if (res.status == 1) {
					this.messageList = (res.data || []).map(item => ({
						...item,
						avatarLoaded: false,
						create_time: dayjs(item.create_time * 1000).format('YYYY-MM-DD HH:mm')
					}))
				} else {
					this.messageList = [];
					uni.showModal({
						showCancel: false,
						title: "获取数据失败",
						content: res.message,
					});
				}
			});
		},

		onAvatarLoad(index) {
			if (this.messageList[index]) {
				this.$set(this.messageList[index], 'avatarLoaded', false);
			}
		},
		// 测试跳转我的饭局
		toMyfanju() {
			uni.navigateTo({
				url: `/activityPages/MyDinnerParty`
			});
		},
		// 分享海报按钮事件
		async onSharePoster() {
			try {
				const posterPath = await this.drawPosterWithInviteCode();
				// 这里调用原有的系统分享方式
				uni.shareWithSystem({
					type: 'image',
					imageUrl: posterPath, // 用canvas生成的新图片
					success: () => {
						uni.showToast({
							title: '分享成功',
							icon: 'none'
						});
					},
					fail: () => {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						});
					}
				});
			} catch (e) {
				// 错误已在上面处理
			}
			this.showSharePoster = false;
		},
		// 生成带邀请码的海报图片
		drawPosterWithInviteCode() {
			return new Promise((resolve, reject) => {
				uni.getImageInfo({
					src: '/static/shara720.png',
					success: (bgRes) => {
						const ctx = uni.createCanvasContext('posterCanvas', this);
						ctx.drawImage(bgRes.path, 0, 0, 600, 1067);

						// 只绘制邀请码，白色，居中
						ctx.setFontSize(30);
						ctx.setFillStyle('#FFFFFF');
						ctx.setTextAlign('center');
						ctx.setFontFamily && ctx.setFontFamily('Arial');
						ctx.fillText(
							'邀请码：' + (this.userInfo.invite_code || '无'),
							340,
							1010 // 纵坐标下移，比如1030，具体可多试几次
						);

						ctx.draw(false, () => {
							uni.canvasToTempFilePath({
								canvasId: 'posterCanvas',
								width: 600,
								height: 1067,
								destWidth: 600,
								destHeight: 1067,
								success: (res) => {
									resolve(res.tempFilePath);
								},
								fail: (err) => {
									uni.showToast({
										title: '生成海报失败',
										icon: 'none'
									});
									reject(err);
								}
							}, this);
						});
					},
					fail: (err) => {
						uni.showToast({
							title: '加载背景失败',
							icon: 'none'
						});
						reject(err);
					}
				});
			});
		},


		// 复制
		copyText(item) {
			const userInfo = uni.getStorageSync('userInfo');
			const userid = userInfo?.data?.userid || userInfo?.userid || '';
			const botid = item.id;
			if (!userid || !botid) {
				uni.showToast({
					title: '参数缺失',
					icon: 'none'
				});
				return;
			}
			this.$Request.getApi('/bot/api/agentcgetmsgcontent', {
				userid,
				botid
			})
				.then(res => {
					if (res.status === 1 && res.data) {
						uni.setClipboardData({
							data: res.data,
							success: () => {
								uni.showToast({
									title: '复制成功',
									icon: 'none'
								});
							},
							fail: () => {
								uni.showToast({
									title: '复制失败',
									icon: 'none'
								});
							}
						});
					} else {
						uni.showToast({
							title: res.message || '获取内容失败',
							icon: 'none'
						});
					}
				})
				.catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					});
				});
		},
		// 下载
		downLoad(item) {
			const userInfo = uni.getStorageSync('userInfo');
			// 提取 userid，兼容多种结构
			const userid = userInfo?.data?.userid || userInfo?.userid || '';
			const botid = item.id;
			if (!userid) {
				uni.showToast({
					title: '用户信息异常',
					icon: 'none'
				});
				return;
			}
			this.$Request.getApi('/bot/api/agentcgetmsgurl', {
				userid,
				botid
			})
				.then(res => {
					if (res.status === 1 && res.data) {
						const txtUrl = res.data;
						this.handleDownload(txtUrl);
					} else {
						uni.showToast({
							title: res.message || '获取文件失败',
							icon: 'none'
						});
					}
				})
				.catch(err => {
					console.error('请求失败:', err);
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					});
				});
		},
		handleDownload(txtUrl) {
			// #ifdef APP-PLUS
			this.downloadAndSaveApp(txtUrl);
			// #endif

			// #ifdef H5
			this.downloadH5(txtUrl);
			// #endif

			// #ifdef MP-WEIXIN
			this.downloadWeapp(txtUrl);
			// #endif
		},
		downloadAndSaveApp(txtUrl) {
			uni.downloadFile({
				url: txtUrl,
				success: downloadRes => {
					if (downloadRes.statusCode === 200) {
						// #ifdef APP-PLUS
						// 平台判断
						if (uni.getSystemInfoSync().platform === 'android') {
							// 安卓：用Intent触发系统文件管理器保存
							const main = plus.android.runtimeMainActivity();
							const Intent = plus.android.importClass('android.content.Intent');
							const Uri = plus.android.importClass('android.net.Uri');
							const File = plus.android.importClass('java.io.File');
							const Environment = plus.android.importClass('android.os.Environment');
							const context = main;
							const file = new File(downloadRes.tempFilePath);
							const intent = new Intent(Intent.ACTION_CREATE_DOCUMENT);
							intent.addCategory(Intent.CATEGORY_OPENABLE);
							intent.setType('text/plain');
							intent.putExtra(Intent.EXTRA_TITLE, file.getName());
							// 触发系统文件管理器
							main.startActivityForResult(intent, 1001);
							// 监听回调（需原生扩展或uniapp插件支持，简单场景可提示用户手动保存）
							uni.showToast({
								title: '请在系统文件管理器中选择保存位置',
								icon: 'none'
							});
						} else if (uni.getSystemInfoSync().platform === 'ios') {
							// iOS：保存到沙盒后用系统App打开/分享
							uni.saveFile({
								tempFilePath: downloadRes.tempFilePath,
								success: (saveRes) => {
									this.showSuccessToast();
									// 用系统App打开txt
									plus.runtime.openFile(saveRes.savedFilePath);
								},
								fail: err => {
									this.showErrorToast('保存失败');
								}
							});
						} else {
							// 其他平台，默认保存到沙盒
							uni.saveFile({
								tempFilePath: downloadRes.tempFilePath,
								success: () => {
									this.showSuccessToast();
								},
								fail: err => {
									this.showErrorToast('保存失败');
								}
							});
						}
						// #endif
					} else {
						this.showErrorToast('下载失败');
					}
				},
				fail: err => {
					this.showErrorToast('下载失败');
				}
			});
		},

		downloadH5(txtUrl) {
			const link = document.createElement('a');
			link.href = txtUrl;
			link.target = '_blank';
			link.rel = 'noopener noreferrer';
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);

			this.showSuccessToast(); // 模拟成功提示
		},

		downloadWeapp(txtUrl) {
			wx.downloadFile({
				url: txtUrl,
				success: wxRes => {
					if (wxRes.statusCode === 200) {
						wx.saveFile({
							tempFilePath: wxRes.tempFilePath,
							success: () => {
								this.showSuccessToast();
							}
						});
					} else {
						this.showErrorToast('下载失败');
					}
				},
				fail: err => {
					this.showErrorToast('下载失败');
				}
			});
		},
		showSuccessToast() {
			uni.showToast({
				title: '保存成功',
				icon: 'none'
			});
		},
		// 添加窗口尺寸变化监听
		handleResize() {
			const sysInfo = uni.getSystemInfoSync()
			this.windowHeight = sysInfo.windowHeight

			// 重新获取VIP卡片高度并计算内容高度
			const query = uni.createSelectorQuery().in(this)
			let vipCardHeight = 0;
			
			query.select(".vip-card")
				.boundingClientRect((data) => {
					if (data) {
						vipCardHeight = data.height;
					}
				})
				.exec()
			
			setTimeout(() => {
				// 重新计算内容高度
				const safeAreaBottom = sysInfo.safeAreaInsets ?
					sysInfo.safeAreaInsets.bottom :
					0
				this.contentHeight = this.windowHeight - this.headerHeight - vipCardHeight - this.tabbarHeight - safeAreaBottom
				this.swiperHeight = this.contentHeight
			}, 50)
		},
		refreshUserInfo() {
			const userInfo = uni.getStorageSync("userInfo") || {};
			this.userInfo = userInfo.data ? userInfo.data : userInfo;
			this.$forceUpdate && this.$forceUpdate();
		},
		getAvatarUrl(head) {
			if (!head) {
				return '/static/default_avatar.png'; // 默认头像
			}
			// 如果已经是完整url，直接返回
			if (/^https?:\/\//.test(head)) return head;
			// 防止多斜杠
			return 'https://tob.cycyai.com/' + head.replace(/^\/+/, '');
		},
		// 会议记录列表
		getMeetingList() {
			if (!this.userInfo || !this.userInfo.userid) return;
			let userInfo = uni.getStorageSync('userInfo');
			const userid = userInfo?.data?.userid || userInfo?.userid || '';
			let formData = {
				userid: userid,
			};
			this.$Request.postApi("/bot/api/agentcgetmymeeting", formData).then((res) => {
				if (res.status == 1) {
					this.meetingList = (res.data || []).map(item => ({
						...item,
						avatarLoaded: false,
						create_time: dayjs(item.create_time * 1000).format('YYYY-MM-DD HH:mm')
					}))
				} else {
					this.meetingList = [];
					uni.showModal({
						showCancel: false,
						title: "获取数据失败",
						content: res.message,
					});
				}
			});
		},
		onMeetingClick(item) {
			const appSecret = item.bot_data.app_secret;
			let userInfo = uni.getStorageSync('userInfo');
			const userid = userInfo?.data?.userid || userInfo?.userid || '';
			uni.navigateTo({
				url: `/activityPages/reserve?appSecret=${encodeURIComponent(appSecret)}&userid=${encodeURIComponent(userid)}`
			});
		},
		onMeetingAvatarLoad(index) {
			if (this.meetingList[index]) {
				this.$set(this.meetingList[index], 'avatarLoaded', true);
			}
		},
		onMeetingAvatarError(index) {
			if (this.meetingList[index]) {
				this.$set(this.meetingList[index], 'avatarLoaded', false);
			}
		},
		// 下载会议总结
		downLoadMeetingSummary(item) {
			const userInfo = uni.getStorageSync('userInfo');
			// 提取 userid，兼容多种结构
			const userid = userInfo?.data?.userid || userInfo?.userid || '';
			if (!userid) {
				uni.showToast({
					title: '用户信息异常',
					icon: 'none'
				});
				return;
			}
			// 调用获取个人会议记录列表接口
			this.$Request.postApi('/bot/api/agentcgetmymeeting', {
				userid
			}).then(res => {
				if (res.status === 1 && res.data && res.data.length > 0) {
					// 根据当前item的id找到对应的会议总结
					const meetingRecord = res.data.find(record => record.id === item.id);
					if (meetingRecord && meetingRecord.url) {
						const txtUrl = meetingRecord.ai_url;
						this.handleDownload(txtUrl);
					} else {
						uni.showToast({
							title: '未找到对应的会议总结文件',
							icon: 'none'
						});
					}
				} else {
					uni.showToast({
						title: res.message || '获取会议总结失败',
						icon: 'none'
					});
				}
			})
				.catch(err => {
					console.error('请求失败:', err);
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					});
				});
		},
		// 下载会议记录文件
		downLoadMeeting(item) {
			const userInfo = uni.getStorageSync('userInfo');
			// 提取 userid，兼容多种结构
			const userid = userInfo?.data?.userid || userInfo?.userid || '';
			if (!userid) {
				uni.showToast({
					title: '用户信息异常',
					icon: 'none'
				});
				return;
			}

			// 调用获取个人会议记录列表接口
			this.$Request.postApi('/bot/api/agentcgetmymeeting', {
				userid
			})
				.then(res => {
					if (res.status === 1 && res.data && res.data.length > 0) {
						// 根据当前item的id找到对应的会议记录
						const meetingRecord = res.data.find(record => record.id === item.id);
						if (meetingRecord && meetingRecord.url) {
							const txtUrl = meetingRecord.url;
							this.handleDownload(txtUrl);
						} else {
							uni.showToast({
								title: '未找到对应的会议文件',
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: res.message || '获取会议记录失败',
							icon: 'none'
						});
					}
				})
				.catch(err => {
					console.error('请求失败:', err);
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					});
				});
		},
		closeSearchModel(e) {
			if (e == "true") {
				// this.boxShow = true;
			} else if (e == "false") {
				// this.boxShow = false;
			}
		},
		// 加载个人智能体列表
		loadPersonalAIList() {
			if (!this.userInfo || !this.userInfo.userid) {
				return;
			}
			let userInfo = uni.getStorageSync('userInfo');
			const userid = userInfo?.data?.userid || userInfo?.userid || '';
			if (!userid) {
				return;
			}

			// 设置加载状态
			this.personalAILoading = true;
			let formData = {
				userid: userid,
			};
			this.$Request.postApi("/bot/api/getuseragentclist", formData).then((res) => {
				if (res.status == 1) {
					// 处理响应数据，提取需要的字段
					this.personalAIList = (res.data || []).map(item => {
						const hasImage = item.botdata?.headimgurl;
						const processedItem = {
							id: item.id,
							title: item.botdata?.title,
							description: item.botdata?.prologue,
							image: this.getAvatarUrl(item.botdata?.headimgurl),
							app_secret: item.botdata?.app_secret || '',
							imageLoaded: !hasImage, // 如果没有图片，直接设置为已加载状态
							// 保存原始数据以备后用
							originalData: item
						};
						return processedItem;
					});
				} else {
					this.personalAIList = [];
					uni.showModal({
						showCancel: false,
						title: "获取数据失败",
						content: res.message || '获取个人智能体列表失败',
					});
				}
			}).catch(err => {
				console.error('请求个人智能体列表失败:', err);
				this.personalAIList = [];
				uni.showToast({
					title: '网络请求失败',
					icon: 'none'
				});
			}).finally(() => {
				// 无论成功失败都要关闭加载状态
				this.personalAILoading = false;
			});
		},

		// 点击个人智能体卡片
		onPersonalAIClick(item) {
			let userInfo = uni.getStorageSync('userInfo');
			const userid = userInfo?.data?.userid || userInfo?.userid || '';
			// 跳转到智能体对话页面
			uni.navigateTo({
				url: `/activityPages/reserve?appSecret=${encodeURIComponent(item.app_secret)}&userid=${encodeURIComponent(userid)}`
			});
		},

		// 子标签点击事件
		onSubTabClick(index) {
			this.aiSubTabIndex = index;
			if (index === 0) {
				// 个人智能体子标签
				this.loadPersonalAIList();
			}
		},

		// 图片加载成功
		onBotImageLoad(index) {
			if (this.personalAIList[index]) {
				this.$set(this.personalAIList[index], 'imageLoaded', true);
			}
		},

		// 图片加载失败
		onBotImageError(index) {
			if (this.personalAIList[index]) {
				this.$set(this.personalAIList[index], 'imageLoaded', true); // 加载失败也设置为已加载，避免无限加载
			}
		},
		onMessageAvatarLoad(index) {
			if (this.messageList[index]) {
				this.$set(this.messageList[index], 'avatarLoaded', true);
			}
		},
		onMessageAvatarError(index) {
			if (this.messageList[index]) {
				this.$set(this.messageList[index], 'avatarLoaded', false);
			}
		},

		// 更新用户头像
		updateUserAvatar(data) {
			if (data && data.avatarUrl) {
				// 更新当前页面的用户信息
				this.userInfo.user_head = data.avatarUrl;

				// 强制更新视图
				this.$forceUpdate && this.$forceUpdate();

				console.log('头像已更新:', data.avatarUrl);
			}
		},

		// 更新用户信息
		updateUserInfo(data) {
			if (data && data.userInfo) {
				// 更新当前页面的用户信息
				this.userInfo = {
					...this.userInfo,
					...data.userInfo
				};

				// 强制更新视图
				this.$forceUpdate && this.$forceUpdate();

				// console.log('用户信息已更新:', data.updatedFields);
			}
		},
	},
	// 监听窗口尺寸变化
	onResize() {
		this.handleResize()
	},
	computed: {
		favoriteRows() {
			// 每行2个
			const rows = []
			const arr = this.favoriteList.slice()
			if (arr.length % 2 !== 0) {
				arr.push({
					__empty: true,
					id: "empty_" + Math.random(),
				}) // 补空
			}
			for (let i = 0; i < arr.length; i += 2) {
				rows.push(arr.slice(i, i + 2))
			}
			return rows
		},
		vipStatusText() {
			const userType = this.userInfo.user_type;
			switch (userType) {
				case 1:
					return "普通用户";
				case 2:
					return "VIP用户";
				case 3:
					return "SVIP用户";
				default:
					return "未知用户";
			}
		},
		vipEndTimeText() {
			const vipEndTime = this.userInfo.vip_end_time;
			if (vipEndTime) {
				return `有效期：${dayjs(vipEndTime * 1000).format('YYYY-MM-DD')}`;
			}
			return "无";
		},

	},

}
</script>

<style>
page {
	background-color: #100d05;
}
</style>
<style lang="scss" scoped>
.page-container {
	width: 100%;
	color: #ffffff;
	padding-bottom: env(safe-area-inset-bottom, 20px);
	background-color: #100d05;

	.status-bar {
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #100d05;
		height: 88rpx; // 你可以根据实际导航栏高度调整
		padding: 0 32rpx; // 左右内边距
		position: relative;
		/* 保证绝对定位生效 */

		.tn-nav-avatar {
			display: flex;
			align-items: center;
			position: static;
			margin-top: 0;

			.tn-block-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 14px;
			}

			.tn-user-name {
				color: #ffffff;
				font-size: 37rpx;
				margin-left: 20rpx;
			}
		}

		.tn-nav-icon {
			margin-top: 40rpx;
		}

		.tn-mg-right {
			margin-right: 40rpx;
		}

		.nav-right-icons {
			display: flex;
			align-items: center;
			gap: 24rpx;
			height: 100%;
			margin-top: 0;
			margin-left: auto;
			// position: absolute;
			// right: 32rpx;
			// top: 50%;
			// transform: translateY(-50%);
		}

		.nav-icon {
			width: 46.15rpx;
			height: 46.15rpx;
			display: block;
		}
	}

	.main-sroll-view {
		background-color: transparent; // 或和页面背景色一致
	}

	.main-sroll-header,
	.main-sroll-content {
		will-change: transform;
		transform-style: preserve-3d;
		backface-visibility: hidden;
	}

	.main-sroll-header {
		position: relative;
		z-index: 2;
	}

	.main-sroll-content {
		position: relative;
		z-index: 10;
		overflow: hidden;
		border-radius: 27rpx 27rpx 0rpx 0rpx;
		background-color: #191817;
		min-height: calc(100vh - 200px); // 88px为顶部导航高度，根据实际调整
		padding-bottom: env(safe-area-inset-bottom, 20px); // 适配iOS和安卓底部安全区
	}

	.user-info-card {
		position: relative;
		background: transparent;
		padding: 32rpx 32rpx 32rpx 32rpx;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

		.user-info-main {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.user-avatar {
			width: 115.38rpx;
			height: 115.38rpx;
			border-radius: 50%;
			background: #23232b;
			margin-right: 24rpx;
		}

		.user-info-text {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.user-nickname-row {
			display: flex;
			align-items: center;
		}

		.user-nickname {
			color: #fff;
			font-size: 35rpx;
			font-weight: 600;
			margin-right: 12rpx;
		}

		.copy-icon {
			width: 32rpx;
			height: 32rpx;
			margin-left: 19rpx;
		}

		.user-uid-row {
			margin-top: 8rpx;
			display: flex;
			align-items: center;
		}

		.user-uid {
			color: #8c8a8a;
			font-size: 23rpx;
			font-weight: 400;
		}

		.user-stats-row {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 32rpx;
			gap: 48rpx;
		}

		.user-stat {
			display: flex;
			flex-direction: column;
			align-items: center;
			min-width: 80rpx;
		}

		.user-stat-number {
			color: #fff;
			font-size: 31rpx;
			font-weight: 500;
		}

		.user-stat-label {
			color: #8c8a8a;
			font-size: 23rpx;
			margin-top: 4rpx;
			font-weight: 400;
		}

		.edit-btn {
			position: absolute;
			right: 32rpx;
			bottom: 32rpx;
			width: 74rpx;
			height: 74rpx;
			background: #292827;
			border-radius: 50%;
			padding: 16rpx;
			box-sizing: border-box;
		}

		.user-info-right {
			display: flex;
			align-items: center;

			.info-vip {
				margin-right: 10rpx;

				.vip-name {
					font-size: 24rpx;
					color: #999;
				}

				.vip-time {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #999;
				}
			}

			.user-info-arrow {
				width: 46.15rpx;
				height: 46.15rpx;
			}

			.vip-open-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				background: linear-gradient(90deg, #FFD700 0%, #FFB800 100%);
				border: none;
				border-radius: 32rpx;
				padding: 0 20rpx;
				height: 40rpx;
				margin-left: 16rpx;
				color: #fff;
				font-size: 24rpx;
				font-weight: 500;
				box-shadow: 0 0 12rpx 2rpx #FFD70099, 0 2rpx 8rpx 0 #FFD70033;
				cursor: pointer;
				overflow: hidden;
				background-size: 200% 100%;
				animation: vip-gradient-move 2s linear infinite;
				// 发光边框
				box-shadow:
					0 0 12rpx 2rpx #FFD70099,
					0 2rpx 8rpx 0 #FFD70033,
					0 0 0 3rpx #fff70044 inset;

				.vip-icon {
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
					vertical-align: middle;
				}

				.vip-btn-text {
					font-size: 24rpx;
					font-weight: 600;
					letter-spacing: 2rpx;
					z-index: 2;
					position: relative;
				}

				// 点击缩放动画
				transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
				box-shadow 0.2s;

				&:active {
					transform: scale(0.96);
					box-shadow: 0 4rpx 16rpx 0 #FFD70055, 0 0 16rpx 4rpx #FFD70099;
				}

				// 光斑扫过
				.vip-glare {
					content: "";
					position: absolute;
					left: -40%;
					top: 0;
					width: 60%;
					height: 100%;
					background: linear-gradient(120deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.0) 100%);
					filter: blur(2rpx);
					opacity: 0.7;
					z-index: 1;
					animation: glare-move 2.2s infinite linear;
					pointer-events: none;
				}
			}
		}
	}

	.user-intro {
		margin: 30rpx 0;
		padding: 0 24rpx;
	}

	// VIP卡片样式
	.vip-card {
		width: calc(100% - 64rpx);
		height: 141.22rpx;
		margin: 0 32rpx 0rpx 32rpx;
		// margin: 24rpx 32rpx;
		border-radius: 19rpx;
		background-image: url('/static/vip-card.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		overflow: hidden;
		position: relative;

		.vip-card-content {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			box-sizing: border-box;
		}

		.vip-card-left {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.vip-title {
			font-size: 31rpx;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 1.2;
			margin-bottom: 8rpx;
		}

		.vip-subtitle {
			font-size: 23rpx;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 0.9;
			line-height: 1.2;
		}

		.vip-card-right {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.vip-open-button {
			background: linear-gradient( 308deg, #0077FF 0%, #6FFAFF 100%);
			border: 2rpx solid;
			border-image: linear-gradient(143deg, rgba(165, 247, 255, 1), rgba(81, 165, 255, 1)) 2 2;
			border: none;
			border-radius: 32rpx;
			padding: 16rpx 32rpx;
			height: 64rpx;
			color: #FFFFFF;
			font-size: 27rpx;
			font-weight: 600;
			line-height: 1;
			transition: all 0.2s ease;
			display: flex;
			align-items: center;
			justify-content: center;

			&:active {
				transform: scale(0.96);
				box-shadow: 0 2rpx 8rpx rgba(0, 212, 255, 0.4);
			}
		}
	}

	.user-number {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 10rpx;
		padding: 0 24rpx;

		.user-number-item-content {
			display: flex;
			align-items: center;
			text-align: center;

			.user-number-item {
				padding-right: 60rpx;

				.user-number-item-number {
					font-weight: 500;
				}

				.user-number-item-title {
					font-size: 26rpx;
					color: #5d5d5f;
				}
			}
		}

		.user-number-item-edit {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 80rpx;
			height: 80rpx;
			background-color: #313134;
			border-radius: 50%;
		}
	}

	.scroll-x {
		padding: 0 24rpx;
		margin-top: 60rpx;

		.scroll-x-content {
			display: flex;
			align-items: center;

			.scroll-x-content-item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 350rpx;
				height: 78rpx;
				border-radius: 12rpx;
				background-color: #313134;
				box-sizing: border-box;

				.scroll-x-content-item-title {
					font-size: 30rpx;
					padding-left: 6rpx;
				}

				.new-item {
					background-color: #e36266;
					border-radius: 30rpx;
					padding: 2rpx 10rpx;
					margin-left: 12rpx;
					font-size: 20rpx;
				}
			}

			.scroll-x-mg {
				margin: 0 20rpx;
			}
		}
	}

	.tab-list {
		width: 400rpx;
		margin-top: 40rpx;
	}

	.ai-section {
		border-radius: 31rpx 31rpx 0rpx 0rpx;

		.ai-tabs-scroll {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			white-space: nowrap;

			&::-webkit-scrollbar {
				display: none;
			}
		}
	}

	.tab-content-swiper {
		width: 100%;
	}

	.swiper-scroll-view {
		height: 100%;
	}

	.ai-tabs,
	.ai-tabs-fixed {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 80rpx;
		padding-top: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		// background: #1a1917;
		transition: all 0.3s ease;
		will-change: transform, opacity;

		.ai-tab {
			font-size: 31rpx;
			color: #8c8a8a;
			margin-right: 48rpx;
			font-weight: 400;
			position: relative;
			padding-bottom: 8rpx;
			transition: color 0.3s ease;

			&.active {
				color: #fff;
				font-size: 31rpx;
				font-weight: 400;

				&::after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 4rpx;
					background-color: #d8d8d8;
					border-radius: 2rpx;
				}
			}
		}
	}

	.ai-tabs-fixed {
		padding-bottom: 20rpx;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 999999;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		transform: translateY(-100%);
		opacity: 0;
		transition: transform 0.3s ease, opacity 0.3s ease;

		&.show {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.ai-card-list {
		margin-top: 24rpx;
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		padding: 0 30rpx;
	}

	.ai-card {
		position: relative;
		border-radius: 24rpx;
		background: linear-gradient(180deg, #2b3363 0%, #5e6ab5 100%);
		padding: 32rpx;
		width: 100%;
		height: 192rpx;
		display: flex;
		align-items: center;
		border-radius: 15rpx;

		.arrow {
			font-size: 28rpx;
			margin-left: 8rpx;
		}
	}

	.create-card {
		background: linear-gradient(90deg, #5e6ab5 0%, #8b9cf6 100%);
		color: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		.create-card-left {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.create-title-row {
			display: flex;
			align-items: center;
		}

		.create-title {
			font-size: 38rpx;
			font-weight: 500;
			color: #ffffff;
			line-height: 1;
		}

		.right-arrow {
			width: 30.77rpx;
			height: 30.77rpx;
			margin-left: 8rpx;
			vertical-align: middle;
		}

		.create-desc {
			font-size: 23rpx;
			margin-top: 8rpx;
			font-weight: 400;
			color: #ffffff;
		}

		.create-add-btn {
			position: absolute;
			right: 32rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 56.48rpx;
			height: 61.54rpx;
		}
	}

	.personality-card {
		background: none;
		padding: 0;
		overflow: hidden;

		.personality-bg {
			width: 100%;
			height: 192.31rpx;
			border-radius: 24rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.personality-content {
			position: relative;
			z-index: 2;
			padding: 32rpx;
			color: #fff;

			.personality-title {
				display: flex;
				align-items: center;

				.personality-title-text {
					font-size: 38rpx;
					font-weight: 500;
					color: #ffffff;
				}
			}

			.personality-desc {
				font-size: 23rpx;
				margin-top: 8rpx;
				color: #ffffff;
				font-weight: 400;
			}

			.right-arrow {
				width: 30.77rpx;
				height: 30.77rpx;
				margin-left: 8rpx;
				vertical-align: middle;
			}
		}
	}

	.ai-sub-tabs {
		display: flex;
		flex-direction: row;

		.ai-sub-tab {
			font-size: 27rpx;
			color: rgba(140, 138, 138, 0.85);
			font-weight: 500;
			margin-right: 48rpx;
			padding-bottom: 6rpx;

			&.active {
				color: #fff;
				font-weight: 500;
				font-size: 27rpx;
			}
		}
	}

	.ai-bot-list {
		display: flex;
		flex-wrap: wrap;
		gap: 24rpx;

		.ai-bot-card {
			width: calc((100% - 24rpx) / 2);
			height: 457.69rpx;
			border-radius: 18rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			margin-bottom: 0;
			position: relative;
			background: #32322d;

			.bot-img-container {
				position: relative;
				width: 100%;
				height: 353.85rpx;
				border-top-left-radius: 18rpx;
				border-top-right-radius: 18rpx;
				overflow: hidden;
				background-color: #f5f5f5;
				/* 添加默认背景色 */
			}

			.bot-img {
				width: 100%;
				height: 100%;
				background-size: cover;
				background-position: top;
				border-top-left-radius: 18rpx;
				border-top-right-radius: 18rpx;
				display: block;
				opacity: 0;
				transition: opacity 0.3s ease-in-out;

				&.loaded {
					opacity: 1;
				}
			}

			.hidden-image {
				position: absolute;
				top: -9999px;
				left: -9999px;
				width: 1px;
				height: 1px;
				opacity: 0;
				pointer-events: none;
			}

			.bot-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 0 20rpx 0 20rpx;
				background: #32322d;
			}

			.bot-title-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 12rpx;
			}

			.bot-title {
				font-size: 27rpx;
				color: #fff;
				font-weight: 600;
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.bot-delete {
				width: 32rpx;
				height: 32rpx;
				margin-left: 12rpx;
				opacity: 0.7;
			}

			.bot-desc {
				font-size: 22rpx;
				color: #b0b0b0;
				margin-top: 8rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	.waterfall-flow {
		margin-top: 20rpx;
	}
}

.nav-style {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 999;
	padding: 40rpx 33rpx 20rpx 33rpx;
	background-color: #1c1d21;

	.tn-nav-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tn-mg-right {
		margin-right: 36rpx;
	}
}

.grid {
	display: flex;
	flex-wrap: wrap;
}

.cu-item {
	width: 20%;
	font-size: 30upx;
}

.banner {
	// background-image: url(/static/mybj.png);
	width: 100vw;
	min-height: 280upx;
	background-size: cover;
	position: relative;

	.left {
		position: absolute;
		left: 20upx;
		width: 60upx;
		height: 60upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: #161823;
		opacity: 0.8;

		image {
			width: 36upx;
			height: 36upx;
		}
	}

	.right {
		position: absolute;
		right: 20upx;
		width: 60upx;
		height: 60upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: #161823;
		opacity: 0.7;

		image {
			width: 36upx;
			height: 36upx;
		}
	}
}

.user-info {
	width: 94%;
	margin: 0 3%;
	position: relative;

	.header {
		background: #161823;
		width: 174upx;
		height: 174upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: -60upx;
		border-radius: 50%;

		image {
			width: 160upx;
			height: 160upx;
			border-radius: 50%;
		}
	}
}

.btn {
	width: 94%;
	margin: 0 auto;

	.button {
		background: #3a3a44;
		width: 49%;
		text-align: center;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 8rpx;
	}
}

.user-detail {
	border-bottom: 1px solid rgba(110, 111, 117, 0.5);
	padding: 10upx 0 15upx;
	width: 94%;
	margin: 0 3%;

	.left {
		flex-direction: column;

		.number {
			margin: 10upx 0;
			display: flex;

			image {
				width: 36upx;
				height: 36upx;
				margin-left: 16upx;
			}
		}
	}
}

.introduce {
	width: 94%;
	margin: 0 auto;
	padding: 20upx 0;

	.x_int {
		margin: 16upx 0;

		.btn {
			background: #3a3a44;
			padding: 6upx 12upx;
			margin-right: 10upx;
			border-radius: 6upx;
		}
	}
}

.adv {
	padding: 20upx 0;
	width: 94%;

	margin: 0 3%;

	image {
		width: 100%;
		height: 100%;
	}
}

.nav .cu-item.cur {
	border-bottom: 6rpx solid;
	border-color: #fbc732;
}

.template-mine {
	max-height: 100vh;
}

/* 自定义导航栏内容 start */
.custom-nav {
	height: 100%;

	&__back {
		margin: auto 5rpx;
		font-size: 40rpx;
		margin-right: 10rpx;
		flex-basis: 5%;
		width: 100rpx;
		position: absolute;
	}
}

/* 自定义导航栏内容 end */

/* 顶部背景图 end */

/* 标题 start */
.nav_title {
	-webkit-background-clip: text;
	color: #0e122a;

	&--wrap {
		position: relative;
		display: flex;
		height: 120rpx;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
		background-size: cover;
	}
}

/* 标题 end */

/* 用户头像 start */
.logo-image {
	width: 110rpx;
	height: 110rpx;
	position: relative;
}

.logo-pic {
	background-size: cover;
	background-repeat: no-repeat;
	// background-attachment:fixed;
	background-position: top;
	border: 8rpx solid rgba(255, 255, 255, 0.05);
	box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
	border-radius: 50%;
	overflow: hidden;
	// background-color: #FFFFFF;
}

/* 页面 start*/
.about-shadow {
	border-radius: 15rpx;
	box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}

.about {
	&__wrap {
		position: relative;
		z-index: 1;
		margin: 20rpx 30rpx;
		margin-top: -230rpx;
	}
}

/* 页面 end*/

.create-video-banner {
	position: relative;
	width: 100%;
	height: 192.31rpx;
	margin: 24rpx 0 32rpx 0;
	border-radius: 24rpx;
	overflow: hidden;
	display: flex;
	align-items: center;
	background: transparent;
}

.create-video-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	border-radius: 24rpx;
}

.create-video-content {
	position: relative;
	z-index: 2;
	flex: 1;
	padding: 0 32rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.create-video-title-row {
	display: flex;
	align-items: center;
	font-size: 38rpx;
	font-weight: 600;
	color: #fff;
	margin-bottom: 12rpx;
}

.create-video-arrow {
	width: 30.77rpx;
	height: 30.77rpx;
}

.create-video-title {
	color: #fff;
	font-size: 38rpx;
	font-weight: 600;
}

.create-video-arrow {
	font-size: 38rpx;
	color: #fff;
	margin-left: 16rpx;
}

.create-video-desc {
	font-size: 23rpx;
	color: #fff;
	font-weight: 400;
}

.video-sub-tabs {
	display: flex;
	flex-direction: row;
	margin: 24rpx 0 32rpx 0;
}

.video-sub-tab {
	font-size: 27rpx;
	color: rgba(140, 138, 138, 0.85);
	font-weight: 500;
	margin-right: 48rpx;
	padding-bottom: 6rpx;

	&.active {
		color: rgba(255, 255, 255, 0.85);
		font-weight: 500;
		font-size: 27rpx;
	}
}

.video-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.video-item {
	width: 21vw;
	aspect-ratio: 1/1;
	border-radius: 18rpx;
	overflow: hidden;
	background: #23232b;
}

.video-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 18rpx;
}

.video-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 80rpx;
}

.video-empty-img {
	width: 185.21rpx;
	height: 97.13rpx;
	margin-bottom: 32rpx;
}

.video-empty-text {
	color: rgba(255, 255, 255, 0.5);
	font-size: 23rpx;
	text-align: center;
	font-weight: 400;
}

.message-list {
	padding: 30rpx 30rpx 0 30rpx;
	background: transparent;
}

.message-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 0 60rpx 0;
}

.message-avatar-wrapper {
	position: relative;
	width: 84.62rpx;
	height: 84.62rpx;
	border-radius: 50%;
	margin-right: 24rpx;
	flex-shrink: 0;
}

.lottie-loading-wrapper {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #191817;
	border-radius: 50%;
}

.message-avatar {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: block;
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
	background-color: #2c2c2e;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;

	&.loaded {
		opacity: 1;
	}
}

.hidden-avatar-image {
	position: absolute;
	top: -9999px;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.message-content {
	position: relative;
	flex: 1;
	padding: 0;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;

	.message-copy {
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
		display: flex;
		align-items: center;
		// margin-left: auto;
		gap: 20rpx;

		.copy-icon,
		.down-icon {
			width: 31rpx;
			height: 31rpx;
		}

		.down-icon {
			margin-left: 20rpx;
		}
	}
}

.message-title-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.message-title {
	flex: 1;
	font-size: 32rpx;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.message-date {
	font-weight: 400;
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.5);
	margin-left: 16rpx;
}

.message-desc {
	font-size: 28rpx;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 8rpx;
	max-width: 50vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.empty-message {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 200rpx;
	color: rgba(255, 255, 255, 0.5);
	font-size: 28rpx;
}

.empty-img {
	width: 185.21rpx;
	height: 97.13rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 23rpx;
	color: rgba(124, 123, 118, 0.85);
}

// 加载更多
.loading-more,
.no-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px 0;

	text {
		font-size: 14px;
		color: #999;
		margin-top: 10px;
	}
}

.share-poster-mask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.75);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.share-poster-dialog {
	width: 80vw;
	max-width: 600rpx;
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: env(safe-area-inset-bottom, 24rpx);
}

.share-poster-img-box {
	position: relative;
	width: 100%;

	.share-poster-img {
		width: 100%;
		display: block;
		border-radius: 24rpx 24rpx 0 0;
	}

	.poster-invite-code {
		position: absolute;
		left: 0;
		right: 0;
		top: 94%;
		transform: translateY(-50%);
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		z-index: 2;

		.invite-label {
			color: #fff;
			font-weight: 400;
			margin-right: 8rpx;
			text-shadow: 0 2rpx 8rpx #000;
		}

		.invite-code {
			color: #fff;
			font-weight: bold;
			text-shadow: 0 2rpx 8rpx #000;
			letter-spacing: 2rpx;
		}
	}
}

.share-poster-btns {
	width: 72%;
	display: flex;
	justify-content: space-between;
	border-radius: 24rpx;
	box-sizing: border-box;
	margin-top: 20rpx;
}

.share-cancel-btn,
.share-confirm-btn {
	flex: 1;
	height: 80rpx;
	font-size: 32rpx;
	border-radius: 40rpx;
	margin: 0 20rpx;
	border: none;
	outline: none;
}

.share-cancel-btn {
	background: #e6eaf2;
	color: #3a3a44;
}

.share-confirm-btn {
	background: #4666ff;
	color: #fff;
}

// 渐变流动动画
@keyframes vip-gradient-move {
	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 100% 50%;
	}
}

// 光斑扫过动画
@keyframes glare-move {
	0% {
		left: -60%;
		opacity: 0.2;
	}

	30% {
		opacity: 0.7;
	}

	50% {
		left: 100%;
		opacity: 0.7;
	}

	100% {
		left: 100%;
		opacity: 0;
	}
}

.bot-img-loading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	// background: linear-gradient(135deg, rgba(0, 123, 255, 0.1), rgba(0, 123, 255, 0.05));

	// backdrop-filter: blur(2px);
	background: #32322d;
	border-top-left-radius: 18rpx;
	border-top-right-radius: 18rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	transition: opacity 0.3s ease-in-out;
}

.loading-spinner {
	width: 50rpx;
	height: 50rpx;
	border: 3rpx solid rgba(0, 123, 255, 0.2);
	border-top: 3rpx solid #007bff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	box-shadow: 0 0 20rpx rgba(0, 123, 255, 0.3);
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
		opacity: 0.8;
	}

	50% {
		opacity: 1;
	}

	100% {
		transform: rotate(360deg);
		opacity: 0.8;
	}
}

.bot-img-skeleton {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	// background: linear-gradient(90deg, rgba(0, 123, 255, 0.1) 25%, rgba(0, 123, 255, 0.2) 50%, rgba(0, 123, 255, 0.1) 75%);
	background: #32322d;
	background-size: 200% 100%;
	border-top-left-radius: 18rpx;
	border-top-right-radius: 18rpx;
	animation: shimmer 1.5s infinite;
	z-index: 0;
}

.skeleton-shimmer {
	width: 100%;
	height: 100%;
	background: inherit;
}

@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}

	100% {
		background-position: 200% 0;
	}
}

.avatar-loading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	transition: opacity 0.3s ease-in-out;
}

.avatar-loading-spinner {
	width: 30rpx;
	height: 30rpx;
	border: 2rpx solid rgba(0, 123, 255, 0.2);
	border-top: 2rpx solid #007bff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	box-shadow: 0 0 15rpx rgba(0, 123, 255, 0.3);
}

.avatar-skeleton {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #32322d;
	border-radius: 50%;
	animation: shimmer 1.5s infinite;
	z-index: 0;
}

.avatar-skeleton-shimmer {
	width: 100%;
	height: 100%;
	background: inherit;
	border-radius: 50%;
}

.user-guide {
	width: 100vw;
	min-height: 100vh;
	// padding-bottom: env(safe-area-inset-bottom, 20px);
}
.user-guide-img {
	width: 100%;
	display: block;
}
</style>